<template>
  <div>
    <h1>子组件</h1>
    <ul>
      <li>{{ count }}</li>
      <li>
        <button @click="add">add</button>
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  props: {
    count: {
      type: Number,
      default: 0
    },
    title: {
      type: String,
      default: ''
    }
  },
  // 声明子传父的事件名
  emits: ['change-count'],
  setup (props, context) {
    console.log('接收父组件定义变量：', props)
    console.log(2, context)
    const add = () => {
      // 不能改
      // props.count++
      // 如何改？=》子传父=》this.$emit(vue2) => context.emit('事件名', data)
      context.emit('change-count')
      return {}
    }
  }
}
</script>

<style lang="scss" scoped>

</style>
